<template>
  <div>
    <a-card>
    <a-table class="mt-16" rowKey="id" :columns='columns' :loading="loading" :dataSource='dataList'
      :locale="defaultSetting" size='small' :pagination="false">
      <template slot="target_status" slot-scope="text, record">
        <span>{{ statusMap.get(record.target_status) }}</span>
      </template>
      <template slot="address" slot-scope=" text, record ">
        <a-input v-if="editKey === record.id" v-model="record.address" />
        <span v-else>{{ text }}</span>
      </template>
      <template slot="port" slot-scope="text, record">
        <a-input v-if="editKey === record.id" v-model="record.port" />
        <span v-else>{{ text }}</span>
      </template>
      <template slot="operate" slot-scope='text, record'>
        <div style="display: flex;" v-userAuth="'H1-2'">
          <span>
            <a-switch :checked="record.target_status == 0 ? true : false" @change="hanldeStatus(record)"></a-switch>
          </span>
          <span class="ml-8">
            <a v-if="editKey == record.id" @click="save(record)">{{ $t('Save') }}</a>
            <a v-if="editKey === record.id" @click="cancelEdit(record)" class="ml-8">{{ $t('Cancel')
              }}</a>
            <a v-else @click="edit(record)">{{ $t('Edit') }}</a>
          </span>
          <span class="ml-8">
            <a @click="handleTest(record)">{{ $t('测试') }}</a>
          </span>
          <span class="ml-8 ">
            <a @click="handleDelete(record.id)"> {{ $t('Delete') }}</a>
          </span>
        </div>
      </template>
    </a-table>
    <div class="mt-20">
      <a @click="handleAddServer">{{ $t('+ 增加 Trap 服务器') }}</a>
    </div>

  </a-card>
  </div>
</template>

<script>
import EmptyData from '@/components/common/EmptyData'

export default {
  components: { EmptyData },
    data() {
        return {
            loading: false,
            labelCol: { span: 6 },
            wrapperCol: { span: 18 },
            defaultSetting: { emptyText: <EmptyData /> },

            statusMap: new Map([
                [0, '开启'],
                [1, '关闭']
            ]),
            switchMap: new Map([
                [0, false],
                [1, true]
            ]),
          columns: [
                { title: this.$t('Trap') + this.$t('Server-address'), dataIndex: 'address', key: 'address', width: 180, fixed: 'left', scopedSlots: { customRender: 'address' } },
                { title: this.$t('Trap') + this.$t('Port'), dataIndex: 'port', key: 'port', width: 180, scopedSlots: { customRender: "port" } },
                { title: this.$t('状态'), dataIndex: 'target_status', key: 'target_status', width: 80, scopedSlots: { customRender: "target_status" } },
                { title: this.$t('Operate'), key: "operate", scopedSlots: { customRender: 'operate' }, width: 280, fixed: 'right' }
            ],
            dataList: [],
            editKey: null, // 用来标记当前正在编辑的行
            nextId: 0,

        }
    },

    mounted() {
        this.getList()
    },

    methods: {
        async getList() {
            const { data } = await this.$api.alarm.getSnmpTarget()
            console.log("data", data.mes)
            if (data.flag == '0') {
                this.dataList = data.mes
            }
        },

        handleCancel() {
            this.$refs['ruleForm'].resetFields();
        },

        handleAddServer() {
            const newRow = {
                id: 'new' + this.nextId++,
                address: '',
                port: '',
                target_status: 0,
            };
            this.dataList.push(newRow);
            this.editKey = newRow.id;  // 设置为编辑状态
        },
        //进行编辑
        edit(record) {
            console.log('re', record)
            this.editKey = record.id;
        },

        // 取消编辑
        cancelEdit(record) {
            // 恢复原始数据
            this.editKey = null;
            // 如果是新增的行，可以选择从数据列表中删除这行
            if (typeof (record.id) == 'number') {
                this.editKey = null;
            } else {
                const index = this.dataList.findIndex(item => item.id === record.id);
                this.dataList.splice(index, 1);
            }

        },

        hanldeStatus(record) {
            if (typeof (record.id) == 'number') {
                const params = {
                    id: record.id,
                    address: record.address,
                    port: record.port,
                    target_status: record.target_status == 0 ? 1 : 0
                };
                const { data } = this.$api.alarm.updateSnmpTarget(params)
                this.getList()
                this.editKey = null;
            }

            else {
      
            }
        },

        save(record) {
            if (typeof (record.id) == 'number') {
                const params = {
                    id: record.id,
                    address: record.address,
                    port: record.port,
                    target_status: record.target_status
                };

                const { data } = this.$api.alarm.updateSnmpTarget(params)
                console.log('update', data)
                this.getList()
                this.editKey = null;

            } else {
                const params = {
                    address: record.address,
                    port: record.port,
                    target_status: 0
                };

                const { data } = this.$api.alarm.addSnmpTarget(params)
                console.log("add", data)
                this.getList()
                this.editKey = null;

            }
        },

        handleTest(item) {
            const params = {
                ipaddr: item.address,
                port: item.port
            }
            const { data } = this.$api.alarm.checkSnmp(params)
        },

        handleDelete(id) {
            this.loading = true
            const { data } = this.$api.alarm.delSnmpTarget({ id })
            this.getList()
            this.loading = false

            const index = this.dataList.findIndex(item => item.id === id);
            if (index !== -1) {
                this.dataList.splice(index, 1);
            }
            if (this.editKey === id) {
                this.editKey = "";
            }

            this.loading = false
        },
    }
};
</script>